<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" placeholder="请输入搜素的内容" id="debounce" autofocus />
    <script>
        window.onload = function() {
            let t=500;
            let t1= +new Date();  //1970 到现在的毫秒  时间戳  
            // +日期对象 类型转换 自动转换成整数类型
            const input = document.getElementById('debounce');
            // const ajax = (event) => {
            //     let keyword = event.target.value;
               
            //     console.log(keyword);
            //     let t2= +new Date(); 
            //     //2s 执行一次
            //     if(t2-t1>t){
            //         console.log('-------');
            //         t1=t2;
            //     }
            //     // console.log(t2-t1);
            // }
            // 回调函数
            // 1. keyup 在一开始就声明 放到事件池子里面 event loop
            // 2. 事件处理是在事件发生时触发并执行
            // 3. 异步 回到event 池子里找出事件处理函数调用执行
            // 单位时间里如何减少执行次数

            // debounceAjax 是debounce函数的执行结果，
            // debounce 结果是一个函数
            // 函数 
            const ajax =(event) => {
                console.log('搜素',event.target.value);
            }

            const debounce = (cb,t) => {

                return cb;
            }

           const debounceAjax = debounce(ajax,t);
           // 事件 第二个参数 一定是函数
            input.addEventListener('keyup',debounceAjax)
        }
    </script>
</body>
</html>